<template>
    <el-sub-menu v-for="item in menuData" :key="item.id" :index="`${item.id}`">
      <template #title >
        <span>{{ item.name }}</span>
      </template>
      <template v-if="item.son">
        <RecursiveMenu :menuData="item.son" />
      </template>
      <el-menu-item v-else-if="item.url" :index="`${item.id}`" @click="navigateTo(item.url)">
        {{ item.name }}
      </el-menu-item>
    </el-sub-menu>
</template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  
  const props = defineProps({
    menuData: {
      type: Array,
      required: true
    }
  });
  
  const router = useRouter();
  
  const navigateTo = (url) => {
    console.log(url);
    router.push(url);
  };
  </script>